
<template>
  <div class="login-wrap login14" id="home">
    <div class="login-container wow fadeInDown">
      <div class="login-containerL">
        <img class="loginLogo" :src="resources.logoBg()" alt="" style="height: 50px" />
      </div>
      <div class="login-containerR">
        <div class="loginBody2">
              <div class="loginBody2Title wow fadeInDown" data-wow-delay="0.3s"><span class=" flow-lignt">Hello, 欢迎登录</span>
              </div>
          <div class="loginInput wow fadeInLeft" data-wow-delay="0.6s">
            <div class="icons">
              <img src="./assets/icon_user.png" alt="">
            </div>
            <el-input placeholder="用户名" auto-complete="off" ref="username"
                 id="username"
                 v-model="loginForm.username"
                 @keyup.enter.native="handleLogin"
                 autofocus="true" />
            </div>

            <div class="loginInput wow fadeInRight" data-wow-delay="0.9s"  @click="$refs.password.focus()">
              <div class="icons">
                <img src="./assets/icon_password.png" alt="">
              </div>
              <el-input placeholder="密码" auto-complete="new-password" ref="password"
              id="password"
              @keyup.enter.native="handleLogin"
              v-model="loginForm.password" type="password" show-password />
            </div>

              <div class="loginInput wow fadeInRight remember-password" data-wow-delay="0.9s" style="background-color: transparent;">
                <el-checkbox ref="rememberPassword" v-model="loginForm.rememberPassword">
                  记住密码
                </el-checkbox>
              </div>
              <el-button type="primary" @click.native.prevent="handleLogin" class="loginBut wow fadeInUp btn-login" data-wow-delay="1.8s">
                登 录
              </el-button>
        </div>
      </div>
    </div>

    <div class="bottom-box">
      <div class="bottom1">
        {{resources.appTitle}}
      </div>
      <div class="bottom2">
        {{resources.comName}}
      </div>
    </div>
  </div>
</template>

<script>
import WOW from "wow.js";
import 'wow.js/css/libs/animate.css'
import 'animate.css'
export default {
  data() {
    return {
      password: '',
      username: '',
      code: '',
      loginForm: {
        username: '',
        password: '',
        autologin: false,
        rememberPassword: false
      },
      isCheck: '1',
      // eslint-disable-next-line global-require
      resources: require('@/settings.js').resources,
    }
  },
  mounted: function () {
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
      offset: 0,
      mobile: true,
      live: true,
      callback: function (box) {
      },
      scrollContainer: null,
      resetAnimation: true,
    });
    wow.init();
    console.log('wow', wow)
    //自动登录
    this.loginForm = JSON.parse(localStorage.getItem('loginForm')) || {}
  },
  computed: {},
  methods: {
    handleLogin() {
      const params = {
        code: this.loginForm.username,
        password: this.loginForm.password,
        isCheck: this.isCheck,
        deviceType: '0'
      }
      if (this.strings.isBlank(params.code)) {
        this.utilMessage.warning('请输入用户名')
        this.$refs.username.focus()
        return
      }
      if (this.strings.isBlank(params.password)) {
        this.utilMessage.warning('请输入密码')
        this.$refs.password.focus()
        return
      }

      utilVue.loadShow(true)
      this.$ajax.get('/login', {params}).then(response => {
        utilVue.loadHide()
        if (response.code == 0) {
          //解除锁定状态
          localStorage.setItem('dialogLock', 0)
          if (response.data.checkResult == '1') {
            const {token} = response.data
            const user = response.data
            this.$store.dispatch('setCurrentUser', user)
            if (this.loginForm.rememberPassword) {
              localStorage.setItem('loginForm', JSON.stringify(this.loginForm))
            }
            this.$router.replace({path: '/'}, () => {
            })
          } else {
            this.loginConfirm(response.data.msg)
          }
        } else {
          this.isCheck = '1'
        }
      })
    },

    loginConfirm(msg) {
      this.$confirm(msg, '是否强行登录?该账号最新登录信息如下', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.isCheck = '0'
        this.handleLogin()
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss">
@import url("./iconfont/iconfont.css");
@import '../../styles/login/login_version_1.scss';
@import '../../styles/color.scss';

.login-container:hover {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  visibility: hidden;
  background-color: #fff;
  border-radius: 8px;
  background-image: url("./assets/loginbgr.png");
  background-repeat: no-repeat;
  background-size: 70% 100%;

  .login-containerL {
    width: 50vh;
    height: 50vh;
    background-image: url("./assets/loginbgl.png");
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: center;
  }

  .login-containerR {
    width: 40vh;
    height: 50vh;
    .loginBody2 {
      width: 80%;
      height: 80%;
      margin-top: 10%;
      margin-left: 15%;
    }
  }
}



.login-wrap {
  overflow: hidden;
  height: 100vh;
  width: 100%;
  background: url("./assets/loginbg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .loginLogo {
    margin-left: 16px;
    margin-top:16px;
  }
}

.loginBody {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .loginBodyCenter {
    width: calc(100% - 280px);
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    z-index: 10;
  }

}

.loginTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  p {
    padding-top: 20px;
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    color: #fff;
  }
}

.loginBody2Title {
  font-size: 3vh;
  font-family: PingFang;
  font-weight: 800;
  color: $secondary-color;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  padding-top: 15%;
  padding-bottom: 4vh;
}

.loginBut {
  width: 90%;
  height:4vh;
  font-size: 2.5vh;
  border-radius: 2vh;
  font-family: PingFang;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-top: 3vh;
  cursor: pointer;
  background: $secondary-color;
  border-color: $success;
  transition: 1s;
  &:hover, &:focus {
    background: $secondary-light-color !important;
    border-color: $success;
    color: #FFFFFF;
  }
}


.info {
  display: flex;
  justify-content: space-between;
  width: 400px;
  align-items: center;
  margin: 0 auto;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  flex-direction: row;
  align-content: flex-start;

  .forget {
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #3d80f4;
  }
}


.loginInput {
  width: 90%;
  height: 4vh;
  background: $background-color;
  border-radius: 2vh;
  margin-bottom: 3vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  border: 1px solid $border-color;
  .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: 48px;
    height: 3vh;
    flex-direction: row;
    align-content: flex-start;
    flex-shrink: 0;

    img {
      height: 14px;
    }
  }

  input {
    width: calc(100% - 20px);
    position: relative;
    height: 100%;
    border: 0;
    padding: 0;
    background: none;
    font-size: 16px;
    font-family: PingFang;
    outline: none;
    color: $font-200 !important;
    font-weight: normal !important;
    &::placeholder {
      color: $font-300;
    }
  }

  .el-checkbox__original {
    display: none;
  }
}

input::-webkit-input-placeholder {
  color: rgba(102, 102, 102, 1);
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(102, 102, 102, 1);
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(102, 102, 102, 1);
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(102, 102, 102, 1);
}

.loginBodyMain {
  width: 86%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
.login14 {

  .el-input--small .el-input__inner, .el-input__inner {
    border: 0 !important;
    background-color: transparent !important;
  }

  .el-checkbox__inner {
    border: 1px solid rgba(12, 160, 237, 1.00);
    width: 1vh;
    height: 1vh;
  }

  .el-checkbox, .el-checkbox .is-checked {
    font-size: 1.4vh !important;
  }

  .el-checkbox__label {
    font-size: 1.4vh;
    font-family: PingFang;
    font-weight: 500;
    color: #2face4 !important;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    font-size: 1.4vh !important;
    color: #2face4 !important;
  }

  .el-checkbox.is-checked .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox.is-checked .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #2face4 !important;
    border-color: #2face4 !important;
  }
}

.remember-password{
  border: none !important;
  text-align: right !important;
  display: block !important;
  height: 30px !important;
  margin-bottom: 0 !important;
  margin-top: -15px;
  zoom: 120%;
}

.bottom-box{
  text-align: center;
  position: absolute;
  bottom: 1%;
  letter-spacing: 1px;
  font-size: 1.2vh;
  color: #f5f5f5;
  div{
    display: inline-block;
  }
  .bottom1 {
    margin-right: 10px;
  }
  .bottom2 {
    margin-left: 10px;
  }
}



.el-input .el-input__clear {
  font-size: 1.5vh;
}

.el-input__suffix {
  right: 5%;
}

</style>
